<template>
  <d2-container>

    <template slot="header">
      <el-form :gutter="24" ref="search-box" :model="mainQuery"  label-position="left" :inline="true" size="mini">

        <el-form-item :label="$t('page-announcement.d2-crud.column-title')">
          <el-input placeholder="" v-model="mainQuery.title" @keyup.enter.native="fetchMainData" clearable></el-input>
        </el-form-item>

        <template v-if="isDev">
          <el-form-item :label="$t('page-sys-role.search-box.status')" size="mini">
            <el-select v-model="mainQuery.status" :placeholder="$t('page.form.all')" clearable @change="fetchMainData">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-form>

      <div class="search-btn-box">
        <div class="left">
          <el-button-group>
            <el-button v-if="isDev" class="filter-item" icon="el-icon-plus" type="success" @click="$refs['dialog-add'].show()" :loading="mainTable.loading" size="mini">{{ $t('page.search-box.add') }}</el-button>
          </el-button-group>
        </div>
        <div class="right">
          <el-button class="filter-item" icon="el-icon-refresh" type="default" @click="resetMainData" :loading="mainTable.loading" size="mini">{{ $t('page.search-box.reset') }}</el-button>
          <el-button class="filter-item" icon="el-icon-search" type="primary" @click="fetchMainData" :loading="mainTable.loading" size="mini">{{ $t('page.search-box.search') }}</el-button>
        </div>
      </div>
    </template>

    <el-table
      size="mini"
      :data="mainTable.list"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="title" :label="$t('page-announcement.d2-crud.column-title')" fixed="left" min-width="100"></el-table-column>
      <el-table-column :label="$t('page.form.icon')" width="50px" align="center" header-align="center">
        <template slot-scope="scope">
          <d2-icon v-if="!!scope.row.icon" :name="scope.row.icon"></d2-icon>
          <span v-else style="opacity: .3;">{{ $t('page.form.notData') }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="url" :label="$t('page.form.location')"></el-table-column>
      <el-table-column prop="authName" :label="$t('page.form.permissionidentify')"></el-table-column>
      <el-table-column prop="routeName" :label="$t('page.form.routername')"></el-table-column>
      <el-table-column prop="routePath" :label="$t('page.form.routingaddress')"></el-table-column>
      <el-table-column prop="routeComponent" :label="$t('page.form.Routingcomponent')"></el-table-column>

      <el-table-column :label="$t('page.form.routingcache')" align="center" header-align="center" width="80">
        <template slot-scope="scope">
          <span v-if="!!scope.row.routeCache">{{ $t('page.form.yes') }}</span>
          <span v-else style="opacity: .3;">{{ $t('page.form.not') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sort" :label="$t('page.form.AccordingSorting')" align="right" header-align="right" width="80"></el-table-column>
      <el-table-column prop="type" :label="$t('page.form.nodetypes')" align="center" header-align="center" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.type == 1">{{ $t('page.form.menu') }}</span>          
          <span v-else-if="scope.row.type == 2">{{ $t('page.form.button') }}</span>          
        </template>
      </el-table-column>
      <el-table-column prop="isLink" :label="$t('page.form.Whetherlinkout')" align="center" header-align="center" width="80">
        <template slot-scope="scope">
          <span v-if="!!scope.row.isLink">{{ $t('page.form.yes') }}</span>
          <span v-else style="opacity: .3;">{{ $t('page.form.not') }}</span>
        </template>
      </el-table-column>

      <template  v-if="isDev">
        <el-table-column prop="status" :label="$t('page.form.state')" align="center" header-align="center" width="50">
          <template slot-scope="scope">
            <span v-if="!!scope.row.status">{{ $t('page.form.startusing') }}</span>
            <span v-else style="opacity: .3;">{{ $t('page.form.blockup') }}</span>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="" width="150" fixed="right" align="left">
          <template slot-scope="scope">
              <el-button size="mini" plain circle icon="el-icon-edit-outline" @click="$refs['dialog-add'].show(scope.row)"></el-button>
              <el-button size="mini" plain circle type="primary" icon="el-icon-plus" @click="$refs['dialog-add'].show({parentId: scope.row.id})"></el-button>
              <el-button size="mini" plain circle type="danger" icon="el-icon-delete" @click="handleDel(scope.row)" v-if="!scope.row.children || scope.row.children.length <= 0"></el-button>
          </template>
        </el-table-column>
      </template>

    </el-table>

    <template slot="footer">
    </template>
    <dialog-add ref="dialog-add" 
        @dialog-close="fetchMainData" 
        :statusOptions="statusOptions"
        :boolOptions="boolOptions"
        :typeOptions="typeOptions"
      ></dialog-add>

  </d2-container>
</template>

<script>

import util from '@/libs/util';
import ApiMain from '@/api/system.node';
import ApiRole from '@/api/system.role';
import DialogAdd from './dialog-add';
import i18nTable from "@/mixins/i18n-table";
export default {
  mixins: [i18nTable
  ],
  components: {
    'dialog-add': DialogAdd,
  },
  data () {
    return {

      statusOptions: util.tool.getStatusOptions(),
      boolOptions  : util.tool.getBoolOptions(),
      typeOptions: [],

      isDev: true,

      mainQueryRaw: null,
      mainQuery: {
        title : '',
        status: '',
      },

      mainTable: {
        loading: false,
        options: {
          border             : true,
          stripe             : true,
          highlightCurrentRow: true,
          emptyText          : this.$t('page-sys-role.d2-crud.empty-data'),
          size               : 'mini',
        },
        // indexRow: {
        //   title:this.$t('page.form.serialnumber'),
        //   width: "80",
        //   align:'center'
        // },
        indexRow: null,
        allowSelect: false,
        list: [],
        pagination: {
          currentPage: 1,
          pageSize   : 50,
          total      : 0,
          pageSizes  : [50, 100, 200]
        },
        current: null,
      },
    }
  },
  mounted () {
    this.mainQueryRaw = Object.copy(this.mainQuery);
    this.fetchOptions();
    this.resetMainData();
  },
  beforeDestroy () {
  },
  methods: {

    renderMainData (data) {
      this.mainTable.list = data;
    },

    handleMainSizeChange (val) {
      this.mainTable.pagination.pageSize = val;
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData()
    },
    handleMainPageChange (val) {
      this.mainTable.pagination.currentPage = val;
      this.fetchMainData()
    },

    buildMainQuery () {
      var query = {
        page  : this.mainTable.pagination.currentPage,
        limit : this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      return query;
    },

    // 重置表单
    resetMainData () {
      this.mainQuery = Object.copy(this.mainQueryRaw);
      this.fetchMainData();
    },

    fetchOptions () {
      this.typeOptions = [
        {value: 1, label: '菜单'},
        {value: 2, label: '按钮'},
      ];
    },

    async fetchMainData () {

      this.mainTable.loading = true;

      try {

        var re = null;
        var isTree = true;

        var req = Object.copy(this.buildMainQuery());

    re = await ApiMain.tree(req);
          this.renderMainData(re.tree);
        // if (this.isDev) {
        //   // 开发模式
        //   for (var v in req.search) {
        //     if (req.search[v] !== '' && req.search[v] !== null) {
        //       isTree = false;
        //       break;
        //     }
        //   }

        //   if (isTree) {
        //     req = {};
        //   }

        // }
        // else {
        //   // 展示模式

        //   for (var v in req.search) {
        //     if (req.search[v] !== '' && req.search[v] !== null) {
        //       isTree = false;
        //       break;
        //     }
        //   }

        //   req.search.status = 1;
        // }
        // if (isTree) {
        //   re = await ApiMain.tree(req);
        //   this.renderMainData(re.tree);
        // }
        // else {
        //   re = await ApiMain.list(req);
        //   this.renderMainData(re.list);
        // }

      } catch (err) {
        console.error(err);
      }

      this.mainTable.loading = false;
    },

    handleDel (data) {

      if (!!data.children && data.children.length > 0) {
        this.$message({
          message: '含有子节点,请将子节点删除后重试',
          type: 'warning'
        });

        return;
      }

      this.$confirm('确定要删除该节点吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          size: 'mini',
        }).then(() => {

          ApiMain.del({id: data.id}).then(re => {
            this.$message({message: "删除成功", type: "success"});
            this.fetchMainData();
          });

        }).catch(() => {
        });
    },
  }
}
</script>

<style>

</style>
